window.onload = function() {
    $(function() {
        //首页获取数据时间的转换
        function changetime(tt) {
            let timeSpanstr = "";
            // 获取当前时间
            let date = new Date();
            let nowdate = date.getTime();
            //返回来的时间
            let atime = new Date(tt);
            let replytime = atime.getTime();
            let needtime = nowdate - replytime;

            if (needtime <= 1000 * 60 * 1) {
                timeSpanStr = "刚刚";
            } else if (1000 * 60 * 1 < needtime && needtime <= 1000 * 60 * 60) {
                timeSpanStr = Math.round(needtime / (1000 * 60)) + "分钟前";
            } else if (
                1000 * 60 * 60 * 1 < needtime &&
                needtime <= 1000 * 60 * 60 * 24
            ) {
                timeSpanStr = Math.round(needtime / (1000 * 60 * 60)) + "小时前";
            } else if (
                1000 * 60 * 60 * 24 < needtime &&
                needtime <= 1000 * 60 * 60 * 24 * 15
            ) {
                timeSpanStr = Math.round(needtime / (1000 * 60 * 60 * 24)) + "天前";
            }
            return timeSpanStr;
        }
        let titles = {
            good: "精华",
            share: "分享",
            ask: "问答",
            job: "招聘",
            dev: "测试",
        };

        let title;
        let color;

        //请求首页的全部数据数据
        function getdata(tab, page) {
            $.ajax({
                type: "get",
                url: "https://cnodejs.org/api/v1/topics",
                async: false,
                dataType: "json",
                data: { tab, page },
                success: function(res) {
                    let data = res.data;
                    let title_html = "";
                    for (let i = 0; i < data.length; i++) {
                        //         //调用函数，把时间改成几天前这样的格式
                        changetime(data[i].last_reply_at);
                        let articleid = data[i].id;
                        if (data[i].top) {
                            title = "置顶";
                            color = "totop";
                        } else if (data[i].good) {
                            title = "精华";
                            color = "totop";
                        } else {
                            title = titles[data[i].tab];
                            color = "toreply";
                        }

                        title_html += `
                                        <div class="titlecell row" id="titlecell">
                                            <a href="" class="userimga">
                                                <img src="${data[i].author.avatar_url}" alt="" title="${data[i].author.loginname}">
                                                <span class="${color}">${title}</span>

                                            </a>
                                            <span class="viewnum">
                                            <span>${data[i].reply_count}</span>
                                            <span>/</span>
                                            <span>${data[i].visit_count}</span>
                                            </span>
                                            <!-- 文章的标题 -->
                                            <div class="gettitle col-xs-7 col-lg-9 contpad">
                                                <a href="details/${articleid}" id="articleid">${data[i].title}</a>
                                            </div>
                                            <a href="" class="pubtimea row">
                                                <img src="${data[i].author.avatar_url}" alt="" title="文章图片" class="hidden-sm hidden-xs">
                                                <span>${timeSpanStr}</span>
                                            </a>
                                        </div>     `;

                        $("#titlecell").html(title_html);
                    }
                },
            });
        }
        let tab;
        let page;
        if (!location.search) {
            tab = "all";
            page = 1;
        } else {
            tab = location.search.split("?")[1].split("&")[0].split("=")[1];
            page = location.search.split("?")[1].split("&")[1].split("=")[1];
        }
        $("#" + tab)
            .parent()
            .addClass("active");
        getdata("all", page);
        console.log(tab);
        let base = location.pathname;
        $(".maintita").click(function(e) {
            console.log(e.target.id);
            tab = e.target.id;
            window.history.replaceState({},
                0,
                base + "?tab=" + e.target.id + "&page=" + 1
            );
            getdata(e.target.id, 1);
        });

        //点击页码跳转页面
        $(".pagenum").click(function(e) {
            $(".pagenum").css("color", "blue");
            $(this).css("color", "green");
            let page = $(this).attr("name");
            // getpage(page);
            getdata(tab, page);
            window.history.replaceState({},
                0,
                base + "?tab=" + tab + "&page=" + page
            );
        });
        //点击跳转到首页
        $(".prepagenum").click(function() {
            $(".pagenum").css("color", "blue");
            $(".pagenum:first").css("color", "green");

            getdata(tab, 1);
            window.history.replaceState({}, 0, base + "?tab=" + tab + "&page=1");
        });
        //点击跳转到尾页
        $(".behpage").click(function() {
            $(".behpage").css("color", "blue");
            $(".pagenum").last().css("color", "green");
            getdata(tab, 5);
            window.history.replaceState({}, 0, base + "?tab=" + tab + "&page=5");
        });

        //点击nav跳转到相应的页面
        $("#maintitleuul>li").click(function() {
            $(this).addClass("active");
            $(this).siblings("li").removeClass("active");
        });
    });
};